<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>个人信息</title>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            float: right;
            min-height: 75vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('information')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div th:replace="front-common::infoSide('password')"></div>
            <div class="content">
                <div class="layui-fluid">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>修改密码</legend>
                    </fieldset>
                    <form class="layui-form layui-form-pane"  style="padding-left: 60px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">新密码</label>
                            <div class="layui-input-inline" style="width: 50%;">
                                <input type="password" name="password" id="password" lay-verify="pass" autocomplete="off" placeholder="请输入输入新密码" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">请务必填写新密码</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline" style="width: 50%;">
                                <input type="password" id="confPass" autocomplete="off" placeholder="请输入再次输入新密码" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">两次密码必须一致</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" lay-submit lay-filter="submit" class="layui-btn">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>
<script th:inline="javascript">
    layui.use(['form'],function (){
        var form = layui.form;
        var $ = layui.jquery;

        form.verify({
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        form.on('submit(submit)', function (data) {
            var password = $("#password").val();
            if(password !== $("#confPass").val()){
                layer.msg("两次密码不一致,请重新输入", {icon: 5});
                return false;
            }

            $.ajax({
                url : '/user/information',
                type: 'post',
                async: false,
                contentType : 'application/json',
                dataType: 'json',
                data: JSON.stringify({
                    "msg":"",
                    "code":"",
                    "data": {
                        "username": [[${userInfo.username}]],
                        "password": password
                    }
                }),
                success : function(n) {
                    if (n.result.status) {
                        layer.msg("修改信息成功");
                    }else {
                        layer.msg("修改信息失败,"+n.result.msg);
                    }
                },
                error: function(n) {
                    layer.msg("修改信息失败,"+n.responseJSON.result.msg);
                }
            });
            return false;
        });
    })

</script>
</body>

</html>